<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import LogistcsInfo from './Components/LogistcsInfo.vue'
const activeName = ref('nowOrder');
const orderStatus = ref(1);
const logistcsRef = ref(null);
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([

    {
      type: "input",
      prop: "number",
      placeholder: "订单号",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "expressNumber",
      placeholder: "快递单号",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "goodsName",
      placeholder: "商品名称",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "订单状态",
        label: '',
        prop: 'orderStatus',
        data:[
            {
                label:"全部",
                value:1
            },
            {
                label:"待发货",
                value:2
            }
        ],
        model: "",
    },
    {
        type: "select",
        placeholder: "售后状态",
        filterable:true,
        label: '',
        prop: 'afterSales',
        data:[
            {
                label:"收入",
                value:1
            },
            {
                label:"卖出",
                value:2
            }
        ],
        model: "",
    },
    {
      type: "datePicker",
      prop: ["createStartTime", "createEndTime"],
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      label: "",
      model: [],
    },
])

const totalPage = ref(0)
const tableData = ref([]);
const tableLoading = ref(false);

const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        
        totalPage.value = 100;
        tableData.value = [
            {
                "doctorNumberCode": "YS000299",
                "type": "审方",
                "name": "12313",
                "mobile": "18207123212",
                "idCard": "",
                "frontUrl": "https://static.91medicine.net/images/20230919/2930e77d-fba7-4a7e-bbc4-f6815eca5a6d.jpg",
                "headUrl": "https://static.91medicine.net/images/20230919/f6159f8e-c44a-43cc-ae5c-3ddfc659cd7a.jpg",
                "introduce": "3123",
                "institutions": "九为（浙江）网络科技有限公司",
                "certificateUrl": "https://static.91medicine.net/images/20230919/d5e597c3-1c76-4646-a843-03b0b8686a03.jpg",
                "certificateNo": "312312",
                "titleValue": "",
                "uuid": "8a69c4628aab7785018aac0eb31f0004",
                "state": 1,
                "sfdaDoctorType": "1",
                "storeLocationUuid": "",
                "source": "3"
            },
        ];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const sendOutGoods = (uuid)=>{
    router.push({name:'SendOutGoods',query:{uuid:uuid}})
}
const lookLogistcs = ()=>{
    logistcsRef.value.open();
}
const lookOrderDetail = (uuid)=>{
    console.log(222);
    router.push({name:'OrderManagementDetail',query:{uuid:uuid}})
}
</script>
<template>
    <div class="page-contain">
        <el-tabs v-model="activeName" class="demo-tabs" >
            <el-tab-pane label="近三个月订单" name="nowOrder">
                <div class="btns-status" v-if="activeName == 'nowOrder'">
                    <el-radio-group v-model="orderStatus">
                        <el-radio-button :label="1">全部</el-radio-button>
                        <el-radio-button :label="2">待发货</el-radio-button>
                        <el-radio-button :label="3">已发货未签收</el-radio-button>
                        <el-radio-button :label="4">售后中</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="info-table" v-if="activeName == 'nowOrder'">
                    <SeachTable 
                        :tableType="1"
                        ref="seachTable"
                        :forms="formInline"
                        :tableData="tableData"
                        :totalPage="totalPage"
                        :showTable="false"
                        :isOtherContent="true"
                        @handlerSearch="handlerSearch"
                    >
                        <template #otherContent="{ tableData }">
                            <div class="th">
                                <div class="td" style="width: calc(100% - 148px - 350px - 148px - 148px - 90px);"><div class="lable-name">商品名称</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">单价/数量</div></div>
                                <div class="td" style="width: 350px;"><div class="lable-name">售后</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">订单状态</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">实收款</div></div>
                                <div class="td" style="width: 90px;"><div class="lable-name" style="border-right:0">操作</div></div>
                            </div>
                            <div class="order-table" >
                                <div class="tr" v-for="(item,index) in [1,2,3,4,5,6,7]" :key="index">
                                    <div class="order-info">
                                        <div class="span-item">订单号：2819201923451</div>
                                        <div class="span-item">下单时间：2021-09-09 12:22:12</div>
                                        <div class="span-item">下单人：海王星辰大药房</div>
                                    </div>
                                    <div class="lis" v-for="(lis,i) in [1,2,3]" :key="i">
                                        <div class="td" style="width: calc(100% - 148px - 350px - 148px - 148px - 90px);">
                                           <div class="img"></div> 
                                           <div class="good-name">
                                                <div class="p1">
                                                    [品牌]阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示
                                                </div>
                                                <div class="p2">15g*6袋商品规格规格规格显示不下悬浮展示6袋商品规格规格规格显示不下悬浮展示</div>
                                           </div>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:14px;line-height: 14px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#666;width:100%;font-weight:400;font-size:14px;line-height: 14px">x2</div>
                                            </div>
                                           
                                        </div>
                                        <div class="td" style="width: 350px;">
                                            <!-- <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">-</span> -->
                                            <div style="width:100%">
                                                <div style="color:#3480FF;width:100%;font-weight:400;font-size:14px;line-height: 14px;margin-bottom:8px">请处理</div>
                                                <div style="color:#FF2440;width:100%;font-weight:400;font-size:14px;line-height: 14px">1天12小时24分后自动同意</div>
                                            </div>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">待发货</span>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:18px;line-height: 18px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">含运费：¥10.00</div>
                                            </div>
                                        </div>
                                        <div class="td" style="width: 90px;">
                                            <div>
                                                <div class="btn-line">
                                                    <span @click="sendOutGoods('1231231')">发货</span>
                                        
                                                </div>
                                                <div class="btn-line">
                                                    <span @click="lookOrderDetail('123123')">订单详情</span>
                                                </div>
                                                <div class="btn-line">
                                                    <span>修改物流</span>
                                                </div>
                                                <div class="btn-line">
                                                    <span @click="lookLogistcs()">查看物流</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
    
                        </template>
                    </SeachTable>
                </div>
            </el-tab-pane>
            <el-tab-pane label="三个月前订单" name="frontOrder">
                <div class="btns-status" v-if="activeName == 'frontOrder'">
                    <el-radio-group v-model="orderStatus">
                        <el-radio-button :label="1">全部</el-radio-button>
                        <el-radio-button :label="2">待发货</el-radio-button>
                        <el-radio-button :label="3">已发货未签收</el-radio-button>
                        <el-radio-button :label="4">售后中</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="info-table" v-if="activeName == 'frontOrder'">
                    <SeachTable 
                        :tableType="1"
                        ref="seachTable"
                        :forms="formInline"
                        :tableData="tableData"
                        :totalPage="totalPage"
                        :showTable="false"
                        :isOtherContent="true"
                        @handlerSearch="handlerSearch"
                    >
                        <template #otherContent="{ tableData }">
                            <div class="th">
                                <div class="td" style="width: calc(100% - 148px - 350px - 148px - 148px - 90px);"><div class="lable-name">商品名称</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">单价/数量</div></div>
                                <div class="td" style="width: 350px;"><div class="lable-name">售后</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">订单状态</div></div>
                                <div class="td" style="width: 148px;"><div class="lable-name">实收款</div></div>
                                <div class="td" style="width: 90px;"><div class="lable-name">操作</div></div>
                            </div>
                            <div class="order-table" >
                                <div class="tr" v-for="(item,index) in [1,2,3,4,5,6,7]" :key="index">
                                    <div class="order-info">
                                        <div class="span-item">订单号：2819201923451</div>
                                        <div class="span-item">下单时间：2021-09-09 12:22:12</div>
                                        <div class="span-item">下单人：海王星辰大药房</div>
                                    </div>
                                    <div class="lis" v-for="(lis,i) in [1,2,3]" :key="i">
                                        <div class="td" style="width: calc(100% - 148px - 350px - 148px - 148px - 90px);">
                                           <div class="img"></div> 
                                           <div class="good-name">
                                                <div class="p1">
                                                    [品牌]阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示
                                                </div>
                                                <div class="p2">15g*6袋商品规格规格规格显示不下悬浮展示6袋商品规格规格规格显示不下悬浮展示</div>
                                           </div>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:14px;line-height: 14px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#666;width:100%;font-weight:400;font-size:14px;line-height: 14px">x2</div>
                                            </div>
                                           
                                        </div>
                                        <div class="td" style="width: 350px;">
                                            <!-- <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">-</span> -->
                                            <div style="width:100%">
                                                <div style="color:#3480FF;width:100%;font-weight:400;font-size:14px;line-height: 14px;margin-bottom:8px">请处理</div>
                                                <div style="color:#FF2440;width:100%;font-weight:400;font-size:14px;line-height: 14px">1天12小时24分后自动同意</div>
                                            </div>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">待发货</span>
                                        </div>
                                        <div class="td" style="width: 148px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:18px;line-height: 18px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">含运费：¥10.00</div>
                                            </div>
                                        </div>
                                        <div class="td" style="width: 90px;">
                                            <div>
                                                <div class="btn-line">
                                                    <span @click="sendOutGoods('1231231')">发货</span>
                                        
                                                </div>
                                                <div class="btn-line">
                                                    <span @click="lookOrderDetail('123123')">订单详情</span>
                                                </div>
                                                <div class="btn-line">
                                                    <span>修改物流</span>
                                                </div>
                                                <div class="btn-line">
                                                    <span @click="lookLogistcs()">查看物流</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
    
                        </template>
                    </SeachTable>
                </div>
            </el-tab-pane>
        </el-tabs>
        <LogistcsInfo ref="logistcsRef"></LogistcsInfo>

    </div>
</template>
<style lang="less" scoped>

.page-contain{
    width: 100%;
    height: 100%;
    .order-table{
        width: 100%;
        height: calc(100% - 46px);
        box-sizing: border-box;
        overflow: auto;
        .tr{
            width: 100%;
            margin-bottom:16px;
            .order-info{
                width: 100%;
                height: 46px;
                background: #DDDDDD;
                display: flex;
                justify-content: flex-start;
                padding:0 16px;
                align-items: center;
                box-sizing: border-box;
                .span-item{
                    color: #222222;
                    line-height: 12px;
                    font-size: 12px;
                    font-weight: 400;
                    margin-right: 40px;
                }
            }
            .lis{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                background: #F9F9F9;
                .td{
                    padding:16px;
                    display: flex;justify-content: flex-start;align-items: center;

                    box-sizing: border-box;
                    .btn-line{
                        width: 100%;
                        margin-bottom:8px;
                        span{
                            color:#3480FF;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 14px;
                            cursor: pointer;
                        }
                        &:last-child{
                            margin-bottom: 0;
                        }
                    }
                    .img{
                        width: 48px;
                        height: 48px;
                        border:1px solid #ddd;
                        border-radius: 3px;
                    }
                    .good-name{
                        width: calc(100% - 48px);
                        box-sizing: border-box;
                        padding-left:8px;
                        .p1{
                            color:#3480FF;
                            cursor: pointer;
                            font-weight: bold;
                            width: 100%;
                            line-height: 21px;
                            overflow: hidden; /* 溢出隐藏，因为该多行溢出隐藏只是第n行最后显示省略号，其实n+行还是有的，要通过溢出隐藏将其藏起来不显示 */
                            -webkit-line-clamp: 2; /* 限制超过多少行显示省略号 */
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            margin-bottom:4px;
                            font-size: 14px;
                        }
                        .p2{
                            color:#666666;
                            font-weight: 400;
                            width: 100%;
                            font-size: 14px;
                            line-height: 16px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            
                        }
                    }
                }
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .th{
        width: 100%;
        height: 46px;
        display: flex;
        justify-content: flex-start;
        .td{
            height: 100%;
            display: flex;
            box-sizing: border-box;
            padding-left:16px;
            align-items: center;
            .lable-name{
                width: 100%;
                border-right: 1px solid #ddd;
                height: 14px;
                box-sizing: border-box;
                color: #000000;
                font-size: 14px;
                font-weight: bold;
                line-height: 14px;
            }
        }
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .btns-status{
        width: 100%;
        height: 32px;
        box-sizing: border-box;
        padding:0 12px;
    }
    .info-table{
        width: 100%;
        height: calc(100% - 32px);
    }
}
</style>